<!DOCTYPE html>
<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  {% if not session['mode'] or session['mode'] == 'choice' %}
  <title>Choose LLM-AIx Mode</title>
  {% elif session['mode'] == 'anonymizer' %}
  <title>LLM-AIx Anonymizer</title>
  {% elif session['mode'] == 'informationextraction' %}
  <title>LLM-AIx Information Extraction</title>
  {% endif %}
  <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>

<body>

  <!-- Overlay for mode selection -->
  {% if not session['mode'] or session['mode'] == 'choice' %}
  <div id="modeOverlay" class="overlay">
    <div class="overlay-content">
      <form action="/set_mode" method="GET">
        <h2>Choose Mode</h2>
        <button type="submit" class="btn btn-outline-danger" name="mode" value="anonymizer">LLM-AIx Anonymizer</button>
        <button type="submit" class="btn btn-outline-success" name="mode" value="informationextraction">LLM-AIx Information
          Extraction</button>
      </form>
    </div>
  </div>
  {% endif %}

  <header class="site-header">
    {% if session['mode'] == 'anonymizer' %}
    <nav class="navbar navbar-expand-lg bg-danger-subtle bg-gradient shadow-sm pb-0 pt-0">
      {% elif session['mode'] == 'informationextraction' %}
      <nav class="navbar navbar-expand-lg bg-success-subtle bg-gradient shadow-sm pb-0 pt-0">
        {% else %}
        <nav class="navbar navbar-expand-lg bg-body-tertiary bg-gradient shadow-sm pb-0 pt-0">
          {% endif %}
          <div class="container-fluid">
            {% if session['mode'] == 'anonymizer' %}
            <span class="navbar-brand mb-0 h1">LLM-AIx Anonymizer</span>
            {% elif session['mode'] == 'informationextraction' %}
            <span class="navbar-brand mb-0 h1">LLM-AIx Information Extraction</span>
            {% endif %}
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
              aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link {% if request.endpoint == 'input_processing.main' %}active{% endif %}"
                    aria-current="page" href="{{ url_for('input_processing.main') }}">Preprocessing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link {% if request.endpoint == 'llm_processing.main' %}active{% endif %}"
                    href="{{ url_for('llm_processing.main') }}">LLM Information Extraction</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link {% if request.endpoint == 'llm_processing.llm_results' %}active{% endif %}"
                    href="{{ url_for('llm_processing.llm_results') }}">LLM Results</a>
                </li>
                {% if session['mode'] == 'anonymizer' %}
                <li class="nav-item">
                  <a class="nav-link {% if request.endpoint == 'report_redaction.main' or request.endpoint == 'report_redaction.report_redaction_viewer' or request.endpoint == 'report_redaction.report_redaction_metrics' %}active{% endif %}"
                    href="{{ url_for('report_redaction.main') }}">Report Redaction</a>
                </li>
                {% endif %}
                {% if session['mode'] == 'informationextraction' %}
                <li class="nav-item">
                  <a class="nav-link {% if request.endpoint == 'labelannotation.main' or request.endpoint == 'labelannotation.labelannotationviewer' or request.endpoint == 'labelannotation.labelannotationmetrics' %}active{% endif %}"
                    href="{{ url_for('labelannotation.main') }}">Label Annotation Viewer</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link {% if request.endpoint == 'annotationhelper.annotationhelperform' or request.endpoint == 'annotationhelper.annotationhelperoverview' or request.endpoint == 'annotationhelper.annotationhelperviewer' or request.endpoint == 'annotationhelper.annotationhelperqueue' %}active{% endif %}"
                    href="{{ url_for('annotationhelper.annotationhelperqueue') }}">Annotation Helper</a>
                </li>
                {% endif %}
              </ul>
              <form id="modeForm" action="/set_mode" method="GET" class="d-flex">
                <select id="modeSelect" class="form-select" aria-label="Default select example" name="mode">
                  {% if session['mode'] == 'anonymizer' %}
                  <option selected>Anonymization</option>
                  <option value="informationextraction">Information Extraction</option>
                  {% elif session['mode'] == 'informationextraction' %}
                  <option selected>Information Extraction</option>
                  <option value="anonymizer">Anonymization</option>
                  {% else %}
                  <option selected disabled></option>
                  {% endif %}
                </select>
              </form>
            </div>
          </div>

        </nav>

  </header>
  <main role="main" class="container p-3">
    <div class="row">
      <div class="col-md-12">


        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}

        {% block content %}{% endblock %}
      </div>

    </div>
  </main>

  {% block scripts %}{% endblock %}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>

    document.addEventListener("DOMContentLoaded", function () {
      // Add event listener to mode select element
      var modeSelect = document.getElementById('modeSelect');
      modeSelect.addEventListener('change', function () {
        // Submit the form when a mode is selected
        document.getElementById('modeForm').submit();
      });
    });

  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>